<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录-360账号中心</title>
    <link rel="stylesheet" href="../swiper/swiper-masterall/package/swiper-bundle.min.css">
    <script src="../swiper/swiper-masterall/package/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="../微信微博confont/iconfont.css">

    <!-- 分割 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- <script src="../project/bootstrap/js/bootstrap.min.js"></script> -->
    <script src="./ajax.js"></script>
    <script src="../jquery/jquery.min.js"></script>
    <script src="../validation/dist/jquery.validate.min.js"></script>
    <script src="../validation/dist/localization/messages_zh.min.js"></script>
    <script src="../js/cookie.js"></script>
    <link rel="stylesheet" href="../iconfont/base.css">
    <link rel="stylesheet" href="./mylogin.css">
    <!-- <script src="./login.js"></script> -->
    <script src="./mylogin.js"></script>
    <style>
        /* 表单验证提示信息样式 */
        #username-error {
            font-size: 10px;
            color: red;
            position: absolute;
            right: 83px;
            top: 134px;
        }

        #password-error {
            font-size: 10px;
            color: red;
            position: absolute;
            right: 91px;
            top: 195px;
        }

        /* 轮播图 */
        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            transition: 300ms;
            transform: scale(0.8);
        }

        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.2);
        }

        /* 表示圆圈背景色 */

        .swiper-container img {
            width: 100%;
            height: 100%;
        }

        .swiper-button-next {
            width: 40px;
            height: 62px;
            border-radius: 3px;
            background-color: rgb(204, 204, 204);
            opacity: 0.5;
            color: #fff;
        }

        .swiper-button-next:after {
            font-size: 24px;
        }

        .swiper-button-prev:after {
            font-size: 24px;
        }

        .swiper-button-prev {
            width: 40px;
            height: 62px;
            border-radius: 3px;
            background-color: rgb(204, 204, 204);
            opacity: 0.5;
            color: #fff;
        }

        .swiper-button-next:hover {
            background-color: #333;
            opacity: 0.8;
        }

        .swiper-button-prev:hover {
            background-color: #333;
            opacity: 0.8;
        }

        .swiper-slide-active #img1 {
            background-color: rgb(38, 38, 38);
        }

        .swiper-pagination-bullet-active {
            background: #fff;
        }

        .swiper-slide-active #img2 {
            background-color: rgb(112, 146, 207);
        }

        /* 加了active表示只给当前/选中的添加 */
    </style>
</head>

<body>
    <!-- 色块；版心 -->
    <div class="superbox">
        <div class="header">
            <div class="left">
                <img src="https://p.ssl.qhimg.com/t01a46c936f9a7ffd94.png" alt="" class="logo">
                <span></span>
                <img src="https://p.ssl.qhimg.com/t01b9e6ac529f79e0ae.png" alt="">
            </div>
            <div class="right">
                <span><a href="">帮助中心</a></span>
                <span><a href="">账号申诉</a></span>
                <span><a href="">账号卫士</a></span>
            </div>
        </div>
        <!-- header -->
        <div class="middle">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="https://p.ssl.qhimg.com/t01491c6f839e1b0ec3.png" alt=""
                            id="img1">
                    </div>
                    <div class="swiper-slide"><img src="https://p.ssl.qhimg.com/t01f47e79d371c3a69c.png" alt=""
                            id="img2"></div>
                </div>
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <!-- 轮播图 -->
            <div class="login">
                <div class="banxin">
                    <p class="p1">
                        <span id="p1span1" class="active activecolor">360账号登录</span>
                        <span></span>
                        <span id="p1span2">短信登录</span>
                    </p>
                    <form action="" id="form">
                        <p><input type="text" placeholder="用户名" name="username" class="text"></p>
                        <p> <input type="password" placeholder="密码" name="password" class="password"></p>
                        <input type="submit" value="登录" class="button">
                    </form>
                    <p class="p2"><a href="">忘记密码?</a></p>
                </div>
                <p class="p3">
                    <a href="" class="a1"><i class="iconfont icon-QQ"></i></a>
                    <a href="" class="a2"><i class="iconfont icon-weixin"></i></a>
                    <a href="" class="a3"><i class="iconfont icon-weibo"></i></a>

                    <a href="" class="a4">立即注册</a>
                </p>
            </div>
            <!-- 定位的登录 -->
        </div>
        <!-- middle -->
        <div class="bottom">
            <div class="box">
                <p>Copyright©2005-2021 360.CN All Rights Reserved 360安全中心</p>
                <p><img src="https://p.ssl.qhimg.com/t018b891a688f560525.png" alt=""><a
                        href="">京ICP证080047号[京ICP备08010314号-6] 京公网安备 11000002000006号</a></p>
            </div>
        </div>
    </div>

    <script>
        // fun();
        var swiper = new Swiper('.swiper-container', {
            centeredSlides: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            loop: true,
            effect: 'fade',
        });
        // 轮播图

        let p1span1 = document.querySelector("#p1span1");
        let p1span2 = document.querySelector("#p1span2");
        p1span1.onclick = function () {
            let flag = p1span1.classList.contains("active")
            if (flag == false) {
                p1span1.classList.add("active")
                p1span2.classList.remove("active")
            }
        }
        p1span2.onclick = function () {
            let flag = p1span2.classList.contains("active")
            if (flag == false) {
                p1span2.classList.add("active")
                p1span1.classList.remove("active")
            }
        }
        // 点击才有active    



        // let loginForm = document.querySelector(".button");
        // loginForm.onclick = function (e) {
        //     e = e || window.event;
        //     e.preventDefault();
        //     console.log(1);
        // }
    </script>
</body>

</html>